<template>
    <div class="measuretools-content">
        <el-popover
                placement="left-end"
                width="220"
                trigger="click">
            <div class="measuretools-info">
                        <el-form :model="form" style="margin-top: 5px">
                            <!--        <el-form-item label="产业类别" :label-width="formLabelWidth">-->
                            <!--          <el-input v-model="form.name" autocomplete="off"></el-input>-->
                            <!--        </el-form-item>-->
                            <el-form-item label="测量类型" :label-width="formLabelWidth">
                                <el-select v-model="form.region" placeholder="长度/面积测量" @change="setmeasure(form.region)">
                                    <el-option :label="item" :value="item" v-for="(item,index) in form.date1 ":key="index" ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
            </div>
            <div slot="reference" >
                <el-button type="primary" icon="el-icon-s-promotion" circle title="测量工具"></el-button>
            </div>

        </el-popover>
    </div>

</template>
<script>
    import {
        Circle as CircleStyle,
        Fill,
        RegularShape,
        Stroke,
        Style,
        Text,
    } from 'ol/style';
    import {Draw, Modify} from 'ol/interaction';
    import {LineString, Point} from 'ol/geom';
    import {Vector as VectorSource} from 'ol/source';
    import { Vector as VectorLayer} from 'ol/layer';
    import {getArea, getLength} from 'ol/sphere';
    export default {
        props:['mapsformeasure'],
        watch: {
            mapsformeasure(newV,oldV) {
                this.maps=newV


            }},
        created(){

            // this.addInteraction()
        },
        data(){
            return{
                maps:null,
                yxstyle:null,
                dtstyle:null,
                formLabelWidth: '80px',
                segmentStyle:null,
                segmentStyles:null,
                modifyStyle:null,
                tipStyle:null,
                labelStyle:null,
                style:null,
                tipPoint:null,
                modify:null,
                drawType:'Polygon',
                draw:null,
                vectorlayerfordraw:null,
                form: {
                    region: '',
                    date1:['关闭','面积测量','长度测量'] ,

                },
            }
        },
        methods:{
            setmeasure(val){

                var that=this
                if(that.vectorlayerfordraw!=null){
                    that.vectorlayerfordraw.getSource().clear()
                }
                if(val=='面积测量'){
                    that.maps.removeInteraction(that.draw);
                    that.maps.removeLayer(that.vectorlayerfordraw)
                    that.drawType='Polygon'
                    this.initStyleformeasure()
                    this.addInteraction()
                    this.$emit('measureclick',{'status':true});
                }
                if(val=='长度测量'){
                    that.maps.removeInteraction(that.draw);
                    that.maps.removeLayer(that.vectorlayerfordraw)
                    that.drawType='LineString'
                    this.initStyleformeasure()
                    this.addInteraction()
                    this.$emit('measureclick',{'status':true});
                }
                if(val=='关闭'){

                    that.maps.removeInteraction(that.draw);
                    that.maps.removeLayer(that.vectorlayerfordraw)

                    this.$emit('measureclick',{'status':false});
                }

            },
            changemap(val){
                this.$emit('selectmapimg',val);
                if(val=='电子影像'){
                    this.yxstyle="border:solid 2px blue; "
                    this.dtstyle=null

                }else{
                    this.dtstyle="border:solid 2px blue; "
                    this.yxstyle=null
                }

            },
            initStyleformeasure(){
                this.style = new Style({
                    fill: new Fill({
                        color: 'rgba(255, 255, 255, 0.2)',
                    }),
                    stroke: new Stroke({
                        color: 'rgba(0, 0, 0, 0.5)',
                        lineDash: [10, 10],
                        width: 2,
                    }),
                    image: new CircleStyle({
                        radius: 5,
                        stroke: new Stroke({
                            color: 'rgba(0, 0, 0, 0.7)',
                        }),
                        fill: new Fill({
                            color: 'rgba(255, 255, 255, 0.2)',
                        }),
                    }),
                });

                this.labelStyle = new Style({
                    text: new Text({
                        font: '14px Calibri,sans-serif',
                        fill: new Fill({
                            color: 'rgba(255, 255, 255, 1)',
                        }),
                        backgroundFill: new Fill({
                            color: 'rgba(0, 0, 0, 0.7)',
                        }),
                        padding: [3, 3, 3, 3],
                        textBaseline: 'bottom',
                        offsetY: -15,
                    }),
                    image: new RegularShape({
                        radius: 8,
                        points: 3,
                        angle: Math.PI,
                        displacement: [0, 10],
                        fill: new Fill({
                            color: 'rgba(0, 0, 0, 0.7)',
                        }),
                    }),
                });

                this.tipStyle = new Style({
                    text: new Text({
                        font: '12px Calibri,sans-serif',
                        fill: new Fill({
                            color: 'rgba(255, 255, 255, 1)',
                        }),
                        backgroundFill: new Fill({
                            color: 'rgba(0, 0, 0, 0.4)',
                        }),
                        padding: [2, 2, 2, 2],
                        textAlign: 'left',
                        offsetX: 15,
                    }),
                });
                this.modifyStyle = new Style({
                    image: new CircleStyle({
                        radius: 5,
                        stroke: new Stroke({
                            color: 'rgba(0, 0, 0, 0.7)',
                        }),
                        fill: new Fill({
                            color: 'rgba(0, 0, 0, 0.4)',
                        }),
                    }),
                    text: new Text({
                        text: '点击拖拽可移动',
                        font: '12px Calibri,sans-serif',
                        fill: new Fill({
                            color: 'rgba(255, 255, 255, 1)',
                        }),
                        backgroundFill: new Fill({
                            color: 'rgba(0, 0, 0, 0.7)',
                        }),
                        padding: [2, 2, 2, 2],
                        textAlign: 'left',
                        offsetX: 15,
                    }),
                });
                this.segmentStyle = new Style({
                    text: new Text({
                        font: '12px Calibri,sans-serif',
                        fill: new Fill({
                            color: 'rgba(255, 255, 255, 1)',
                        }),
                        backgroundFill: new Fill({
                            color: 'rgba(0, 0, 0, 0.4)',
                        }),
                        padding: [2, 2, 2, 2],
                        textBaseline: 'bottom',
                        offsetY: -12,
                    }),
                    image: new RegularShape({
                        radius: 6,
                        points: 3,
                        angle: Math.PI,
                        displacement: [0, 8],
                        fill: new Fill({
                            color: 'rgba(0, 0, 0, 0.4)',
                        }),
                    }),
                });
                this.segmentStyles=[this.segmentStyle]
            },
            addInteraction() {
                var that=this
                const source = new VectorSource();
                const modify = new Modify({source: source, style: this.modifyStyle});
                that.modify=modify
                const clearPrevious=true
                const activeTip =
                    '点击地图继续绘制 ' +
                    (that.drawType === 'Polygon' ? '面' : '线');
                const idleTip = '点击地图开始绘制';
                const vector = new VectorLayer({
                    source: source,
                    style: function (feature) {
                        return that.styleFunction(feature, true);
                    },
                    zIndex:6666
                })
                this.maps.addLayer(vector)
                that.vectorlayerfordraw=vector
                let tip = idleTip;
                let draw;

                draw = new Draw({
                    source: source,
                    type: that.drawType,
                    style: function (feature) {
                        return that.styleFunction(feature, true, that.drawType, tip);
                    },
                });
                this.maps.addInteraction(modify);
                draw.on('drawstart', function () {
                    if (clearPrevious) {

                        source.clear();
                    }
                    modify.setActive(false);
                    tip = activeTip;
                });
                draw.on('drawend', function () {
                    that.modifyStyle.setGeometry(that.tipPoint);
                    modify.setActive(true);
                    that.maps.once('pointermove', function () {
                        that.modifyStyle.setGeometry();
                    });
                    tip = idleTip;
                });
                modify.setActive(true);
                this.maps.addInteraction(draw);
                that.draw=draw
            },
            formatLength(line) {
                const length = getLength(line,{projection: 'EPSG:4490'});
                let output;
                if (length > 100) {
                    output = Math.round((length / 1000) * 100) / 100 + ' km';
                } else {
                    output = Math.round(length * 100) / 100 + ' m';
                }
                return output;
            },
            formatArea(polygon) {
                const area = getArea(polygon, {projection: 'EPSG:4490'})
                let output;
                if (area > 10000) {
                    output = Math.round((area / 1000000) * 100) / 100 + ' km\xB2';
                } else {
                    output = Math.round(area * 100) / 100 + ' m\xB2';
                }
                return output;
            },
            styleFunction(feature, segments, drawType, tip) {
                var that=this
                const styles = [this.style];
                const geometry = feature.getGeometry();
                const type = geometry.getType();
                let point, label, line;
                if (!drawType || drawType === type) {
                    if (type === 'Polygon') {
                        point = geometry.getInteriorPoint();
                        label = that.formatArea(geometry);
                        line = new LineString(geometry.getCoordinates()[0]);
                    } else if (type === 'LineString') {
                        point = new Point(geometry.getLastCoordinate());
                        label = that.formatLength(geometry);
                        line = geometry;
                    }
                }
                if (segments && line) {
                    let count = 0;
                    line.forEachSegment(function (a, b) {
                        const segment = new LineString([a, b]);
                        const label = that.formatLength(segment);
                        if (that.segmentStyles.length - 1 < count) {
                            that.segmentStyles.push(that.segmentStyle.clone());
                        }
                        const segmentPoint = new Point(segment.getCoordinateAt(0.5));
                        that.segmentStyles[count].setGeometry(segmentPoint);
                        that.segmentStyles[count].getText().setText(label);
                        styles.push(that.segmentStyles[count]);
                        count++;
                    });
                }
                if (label) {
                    this.labelStyle.setGeometry(point);
                    this.labelStyle.getText().setText(label);
                    styles.push(this.labelStyle);
                }
                if (
                    tip &&
                    type === 'Point' &&
                    !this.modify.getOverlay().getSource().getFeatures().length
                ) {
                    this.tipPoint = geometry;
                    this.tipStyle.getText().setText(tip);
                    styles.push(this.tipStyle);
                }
                return styles;
            },


        },
    };
</script>
<style lang="scss" scoped>
    .measuretools-content{
        position: absolute;
        padding: 0;
        opacity: 1;
        z-index: 1;
        right: 1.2%;
        bottom: 12%;
        background: transparent;
        color: white;
        border: 0;
        transition: opacity 100ms ease-in;
        display: flex;
        flex-direction: column;
        overflow: auto;
    }

    .measuretools-info{
        display: flex;
        flex-direction: row;
        height: 50px;
    }



</style>
